<template>
  <div>
    <a-table
      :pagination="false"
      :columns="columns"
      :data-source="row"
      bordered
      class="bgFFF"
      :scroll="{ x: 1300 }"
      row-key="id"
    >
      <span
        slot="index"
        slot-scope="text, record, index"
      >{{ index + 1 }}</span>
      <template
        slot="operation"
        slot-scope="text, record, index"
      >
        <a @click="chooseRow = record; visible = true;">查看属性值</a>
      </template>
    </a-table>
    <a-modal
      title="查看属性值"
      :visible="visible"
      :footer="null"
      class="normal-modal"
      @cancel="visible = false"
    >
      <b-table
        v-if="visible"
        :columns="propertyColumns"
        :request="modalLoadData"
        row-key="id"
      />
    </a-modal>
  </div>
</template>
<script>
import { findCatalogValueList } from '@/api/material/goods/goods'

export default {
	name:'a'+Date.now(),
    props: {
        row: {
            type: [Object, Array]
        }
    },
    data() {
        return {
            visible: false,
            chooseRow: null,
            columns: [
                {
                    title: '序号',
                    scopedSlots: { customRender: 'index' }
                },
                {
                    title: '属性名称',
                    dataIndex: 'propertyName'
                },
                {
                    title: '属性类别',
                    dataIndex: 'propertyType'
                },
                {
                    title: '属性代码',
                    dataIndex: 'propertySysNo'
                },
                {
                    title: '属性前辍',
                    dataIndex: 'prefix'
                },
                {
                    title: '属性后辍',
                    dataIndex: 'suffix'
                },
                {
                    title: '属性状态',
                    dataIndex: 'commonStatusStr'
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    scopedSlots: { customRender: 'operation' }
                }
            ],
            propertyColumns: [
                {
                    title: '属性值编号',
                    dataIndex: 'propertyValueSysNo'
                },
                {
                    title: '属性值名称',
                    dataIndex: 'valueDesc'
                },
                {
                    title: '状态',
                    dataIndex: 'commonStatusStr'
                }
            ],
            data: [],

            modalLoadData: params => findCatalogValueList(Object.assign(params, { propertyId: this.chooseRow.id }))
        }
    },
    mounted: function() {
    },
    methods: {}
}
</script>
